📖 스토리북 링크 (Storybook Link)

변경된 UI 컴포넌트를 시각적으로 확인하고 인터랙션해볼 수 있는 스토리북 링크를 첨부합니다.

• 바로가기

🔗 관련 이슈 번호 (Related Issue Number)

이 Pull Request가 해결하고자 하는 이슈의 번호를 기재합니다. 이슈 연결을 통해 작업의 배경과 목적을 쉽게 파악할 수 있습니다. (예: Closes #123)

• Closes [STYLE] 목표 상세 페이지의 반응형 디자인을 수정한다. #321
• Closes [STYLE] 노트 관련 페이지의 반응형 디자인을 수정한다. #322

✨ PR 세부 내용 (PR Details)

이번 PR에서 어떤 작업을 했는지 상세하게 설명합니다. 코드 변경의 이유, 구현 방식, 주요 로직 등을 중심으로 작성하면 리뷰어가 이해하는 데 도움이 됩니다.

작업 개요

• 전반적인 반응형 디자인 디테일 작업 진행
• 노트 사이드바의 전역 상태 관리 및 반응형 레이아웃 개선

주요 변경사항

• 전역 상태 관리 추가
  • NoteSidebarProvider 추가 및 Context API 기반 상태 관리 도입
  • layout.tsx에서 Provider 트리 구성 (SidebarProvider → NoteSidebarProvider)
• 구조 리팩토링
  • NotesClient → UI 렌더링만 담당, 사이드바 제어는 상위 NotesPage로 이동
  • NotesPage에서 onTodoClick 콜백을 통해 선택된 할 일을 전역 상태에 전달
• 반응형 사이드바 구현
  • Desktop (≥1440px):
    • 사이드바가 고정(fixed) 위치로 우측에 항상 붙음
    • 메인 콘텐츠(NotesClient)는 lg:mr-360 여백 확보로 자연스러운 레이아웃 유지
  • Mobile/Tablet (<1440px):
    • 오버레이 모달 형태로 노출
    • 배경 블러 및 클릭 시 닫힘 처리

기술적 구현 사항

📸 참고할 스크린샷/영상 (Screenshots/Videos)

작업 내용과 관련된 시각적인 자료가 있다면 첨부합니다. UI 변경이나 새로운 기능의 동작 방식을 보여주는 스크린샷 또는 영상을 활용하면 리뷰어의 이해를 돕습니다.

UI 변경 전/후 스크린샷

노트 모아보기

목표 선택

노트 모아보기 - pc버전

메뉴사이드바 open, 노트사이드바 close	메뉴사이드바 open, 노트사이드바 open

메뉴사이드바 close, 노트사이드바 close	메뉴사이드바 close, 노트사이드바 open

노트 사이드바

목록

읽기모드

수정모드